<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>表单</title>
  <script src="../vue.global.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "hello",
          checkbox: [],
          radio: "",
          selected: "A",
          options: [
            { text: 'A', value: { value: 'A' } },
            { text: 'B', value: { value: 'B' } },
            { text: 'C', value: { value: 'C' } }
          ],
          optSelected: [],
          msg: "hello",
          names: ['jack', 'dell', 'lee']
        }
      },
      methods: {},
      /**
       * 修饰符
       *  v-model.lazy="msg" input失去焦点才会同步
       *  v-model.number="msg" 将输入转换为number
       *  v-model.trim="msg" 去除前后空格
       */
      template: `
          <div style="width:500px;height:200px;background:#ccc;border-radius: 12px;text-align:center;margin:20px auto">
            <div style="">{{message}}</div>
            <br/> 
            <div><input v-model="message"></div><br/> 
            <div>
              <textarea v-model="message"/>
            </div><br/> 
            <input type="checkbox" v-model="message"/>
          </div>

          <br/>   
          <div>
          {{ checkbox }}
          <span v-for="(name,index) of names" :key="index">
            {{name}}:<input type="checkbox" v-model="checkbox" :value="name"/>
          </span>
          </div>

          <br/> 
          <div>
          {{ radio }}
          man:<input type="radio" v-model="radio" value="man"/>
          woman:<input type="radio" v-model="radio" value="woman"/>
          清除:<input type="radio" v-model="radio" value=""/>
          </div>

          <div>
          {{ selected }}
          <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
          </div>

          <div>
          {{ optSelected }}
          <select v-model="optSelected" multiple>
            <option v-for="item in options" :value="item.value">{{ item.text }}</option>
          </select>
          </div>

          <div>
          {{ msg }}
            <input type="checkbox" v-model="msg" true-value="hello" false-value="world"/>
          </div>
        `
    });
    const vm = app.mount("#app");
  </script>
</body>

</html>